<!DOCTYPE html>
<html xmlns:th="http://www.thymeleaf.org" lang="en">
<head>
    <meta charset="UTF-8">
    <title>Reading List</title>
    <link rel="stylesheet" th:href="@{/style.css}" />
</head>
<body>
    <h2>Your Reading List</h2>
    <div th:unless="${#lists.isEmpty(books)}">
        <dl th:each="book : ${books}">
            <dt class="bookHeadline">
                <span th:text="${book.title}">Title</span> by
                <span th:text="${book.author}">Author</span>
                (ISBN: <span th:text="${book.isbn}">ISBN</span> )
            </dt>
            <dd class="bookDescription">
                <span th:if="${book.description}"
                      th:text="${book.description}">Description</span>
                <span th:if="${book.description eq null}">
                    No description available
                </span>
            </dd>
        </dl>
    </div>

    <div th:if="${#lists.isEmpty(books)}">
        <p>You have no books in your book list</p>
    </div>

    <hr/>

    <h3>Add a book</h3>
    <form method="POST">
        <label for="title">Title:</label>
            <input type="text" name="title" size="50"/><br>
        <label for="author">Author:</label>
            <input type="text" name="author" size="50"/><br>
        <label for="isbn">ISBN:</label>
            <input type="text" name="isbn" size="50"/><br>
        <label for="description">Description:</label>
        <textarea type="text" name="description" cols="80" rows="5"></textarea><br>
        <input type="submit">
    </form>
</body>
</html>